.mydrawerheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-theme="light"] {
    .example {
        box-shadow:
            0 1px 2px -2px rgba(0, 0, 0, .08),
            0 3px 6px 0 rgba(0, 0, 0, .06),
            0 5px 12px 4px rgba(0, 0, 0, .04);

        .defauleBg {
            background-color: rgb(239, 239, 245);
        }
    }
}

body[data-theme="dark"] {
    .example {
        box-shadow:
            0 1px 2px -2px rgba(0, 0, 0, .24),
            0 3px 6px 0 rgba(0, 0, 0, .18),
            0 5px 12px 4px rgba(0, 0, 0, .12) ;

        .defauleBg {
            background-color: rgba(255, 255, 255, 0.59);
        }
    }
}

.example {
    transition: all 0.3s;
    background-color: var(--ant-color-bg-elevated);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;

    div {
        border-radius: 6px;
    }

    &:hover {
        border: 2px solid var(--ant-color-primary);
    }

    .heightLigh {
        background-color: var(--ant-color-primary) !important;
    }

    .exampleHeader {
        height: 16px;
        margin-bottom: 10px;
    }

    .exampleBody {
        flex: 1;
        display: flex;

        .exampleContent {
            flex-grow: 1;
            margin-left: 10px;
        }

        .exampleSider {
            height: 40px;
            width: 16px;
        }
    }
}

.highBorder {
    border: 2px solid var(--ant-color-primary) !important;
}

.inlineSetting {
    display: flex;
    align-items: center;
    justify-content: space-between;
}